<template>
  <div>
       <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card>
        <el-row>
            <el-button type="primary" @click="showAddCateDialog()">添加分类</el-button>
        </el-row>
        <el-table :data="cateList" 
            row-key="cat_id"          
            border stripe>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="名称" prop="cat_name"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <i class="el-icon-error" v-if="scope.row.cat_delete" style="color:red"></i>
                    <i class="el-icon-success" v-else style="color:lightgreen"></i>
                </template>
            </el-table-column>
            <el-table-column label="层级">
                <template slot-scope="scope">
                    <el-tag type="primary" size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="scope.row.cat_level==1">二级</el-tag>
                     <el-tag type="warning" size="mini" v-else-if="scope.row.cat_level==2">三级</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120px">
                <template slot-scope="scope">
                   <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditCateDialog(scope.row)">编辑</el-button>
                   <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteCate(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页栏 -->
        <el-pagination         
            :current-page="pagenum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage">
        </el-pagination>
      </el-card>
      <!-- 添加类别对话框 -->
      <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" 
        :close-on-click-modal="false" >
         <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="80px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-cascader
                style="width:100%"
                v-model="selectedPid"
                clearable
                expandTrigger="hover"
                :options="parentCateList"
                :props="{ value: 'cat_id', label: 'cat_name',checkStrictly: true}"
            >
            </el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑类别对话框 -->
      <el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%" 
        :close-on-click-modal="false" >
         <el-form ref="editFormRef" :model="editForm" :rules="addFormRules" label-width="80px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editForm.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCate">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data () {
        return {
            pagenum: 1,
            pagesize: 5,
            totalpage: 0,
            cateList: [],
            addCateDialogVisible: false,
            editCateDialogVisible: false,
            addFormRules: {
                cat_name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            },
            addForm: {
                cat_pid: 0,
                cat_name: '',
                cat_level: 0
            },
            editForm: {
                id: 0,
                cat_name: ''
            },
            selectedPid: [],
            parentCateList: []
        }
    },
    created() {
        this.getCatList();
    },
    methods: {
        async getCatList() {
            const { data: res} = await this.$http.get('categories', { params: { 
                pagenum: this.pagenum ,
                pagesize: this.pagesize

            }});
            if(res.meta.status!=200) {
                return this.$message.error('分配用户角色失败！'+res.meta.msg);
            }
            this.cateList=res.data.result;
            this.totalpage = res.data.total;
            this.pagenum = res.data.pagenum + 1;
            console.log('categories',res.data);
        },
        handleSizeChange(size) {
            this.pagesize=size;
            this.getCatList();
        },
        handleCurrentChange(page) {
            this.pagenum=page;
            this.getCatList();
        },
        async showAddCateDialog() {
            this.addForm.cat_name='';
            this.addForm.cat_pid=0;
            this.addForm.cat_level=0;
            this.selectedPid=[];
            // 获取可用父级分类
            const { data: res} = await this.$http.get('categories',{params: {type:2}});
            if(res.meta.status!=200) {
                return this.$message.error('获取可用父级分类失败！'+res.meta.msg);
            }
            this.parentCateList=res.data;
            console.log(res.data);

            this.addCateDialogVisible=true;
        },
        addCate() {            
            this.$refs.addFormRef.validate(async (valid)=>{
                if(this.selectedPid.length>0)  //选中的是一级或二级
                {
                    this.addForm.cat_level=this.selectedPid.length;
                    this.addForm.cat_pid=this.selectedPid[this.selectedPid.length-1];
                }
                else
                {
                    this.addForm.cat_level=0;
                    this.addForm.cat_pid=0;
                }
                const { data: res} = await this.$http.post('categories',this.addForm);
                if(res.meta.status!=201) {
                    return this.$message.error('新建分类失败！'+res.meta.msg);
                }
                this.getCatList();
                this.$message.success('新建分类成功！');
                this.addCateDialogVisible=false;
            });
        },
        async showEditCateDialog(cate) {
            this.editForm.id=cate.cat_id
            this.editForm.cat_name=cate.cat_name;
            this.editCateDialogVisible=true;
        },
        async editCate() {
            this.$refs.editFormRef.validate(async (valid)=>{
                const { data: res} = await this.$http.put(`categories/${this.editForm.id}`
                    ,{cat_name: this.editForm.cat_name});
                if(res.meta.status!=200) {
                    return this.$message.error('编辑分类失败！'+res.meta.msg);
                }
                this.getCatList();
                this.$message.success('编辑分类成功！');
                this.editCateDialogVisible=false;
            });
        },
        async deleteCate(cate) {
            const result = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err);
            console.log('confirm', result);
            if(result=='confirm') {
                const { data: res} = await this.$http.delete(`categories/${cate.cat_id}`);
                if(res.meta.status!=200) {
                    return this.$message.error('编辑分类失败！'+res.meta.msg);
                }
                this.$message.success('删除分类成功！');
                this.getCatList();
            }
        }
    }
}
</script>

<style lang="less" scoped>

</style>